<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        联系: 他们都可以让元素变得看不见

        区别: display:none;会让元素从渲染中完全消失，渲染的时候不占据任何空间，visibility:hidden;不会让元素从渲染树消失，渲染时元素会继续占用空间，只是内容变为不可见。
	    修改常规元素中的display通常会造成文档的重排。修改visibility只会造成文本元素的重绘
     -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
        }

        .box1 {
            /* 通过对比可以看到，如果使用display: none;则box2会直接跑到左上角，也就代表着box1此时可以视为消失。但是如果使用visibility:hidden;会发现box2的上面其实是有东西的，只是看不到是什么，像是隐身了一样，但是他占据的空间还是在的。 */

            /* visibility: hidden; */
            display: none;
            background-color: pink;
        }

        .box2 {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>